import { setProfileAction, userProfileAction } from '@/store/action/profile'
import { useInitState } from '@/utils/hooks'
import { Button, List, DatePicker, NavBar, Dialog } from 'antd-mobile'
import classNames from 'classnames'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import InputPop from './components/PopInput'
import ListPop from './components/ListPop'
import styles from './index.module.scss'
import { PopType } from './components/PopInput'
import { ListPopType } from './components/ListPop'
import dayjs from 'dayjs'
import { useDispatch } from 'react-redux'
import { logoutAction } from '@/store/action/user'
const Item = List.Item

const ProfileEdit = () => {
  const { profile } = useInitState(userProfileAction(), 'profile')
  const history = useHistory()
  const dispatch = useDispatch()
  const [visbile, setVisbile] = useState(false)
  const [type, setType] = useState<PopType['type']>('name')
  const [showListPop, setShowListPop] = useState(false)
  const [listPopType, setlistPopType] = useState<ListPopType['type']>('gender')
  const [datePopshow, setDatePopShow] = useState(false)
  const closePop = () => {
    setVisbile(false)
  }
  // input弹框
  const showPop = (type: PopType['type']) => {
    setType(type)
    setVisbile(true)
  }
  // 底部弹框
  const listPopShow = (type: ListPopType['type']) => {
    setlistPopType(type)
    setShowListPop(true)
  }
  // 关闭头像性别弹框
  const colseListPop = () => {
    setShowListPop(false)
  }
  // 修改生日
  const changeDate = async (e: Date) => {
    // console.log(e)
    const birthday = dayjs(e).format('YYYY-MM-DD')
    // console.log(birthday)
    await dispatch(setProfileAction('birthday', birthday))
    setDatePopShow(false)
  }
  // 退出登录
  const logout = () => {
    Dialog.show({
      content: '确定退出登录吗',
      closeOnAction: true,
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
            style: { color: 'gray' },
            onClick: () => {
              console.log('取消')
            },
          },
          {
            key: 'delete',
            text: '确定',
            bold: true,
            danger: true,
            onClick: () => {
              console.log('确认')
              dispatch(logoutAction())
              history.replace('/login')
            },
          },
        ],
      ],
    })
  }
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}
          onBack={() => {
            history.push('/home/profile')
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              onClick={() => {
                listPopShow('photo')
              }}
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={profile.photo} alt="" />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item
              arrow
              extra={profile.name}
              onClick={() => {
                showPop('name')
              }}
            >
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {profile.intro || '未填写'}
                </span>
              }
              onClick={() => {
                showPop('intro')
              }}
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item
              onClick={() => {
                listPopShow('gender')
              }}
              arrow
              extra={profile.gender === 0 ? '男' : '女'}
            >
              性别
            </Item>
            <Item
              arrow
              extra={profile.birthday}
              onClick={() => {
                setDatePopShow(true)
              }}
            >
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn" onClick={logout}>
            退出登录
          </Button>
        </div>
      </div>
      <InputPop type={type} visbile={visbile} close={closePop}></InputPop>
      <ListPop
        visible={showListPop}
        type={listPopType}
        close={colseListPop}
      ></ListPop>
      <DatePicker
        title="时间选择"
        visible={datePopshow}
        onClose={() => {
          setDatePopShow(false)
        }}
        value={new Date(profile.birthday)}
        onConfirm={changeDate}
        min={new Date(1900, 0, 1, 0, 0, 0)}
        max={new Date()}
      />
    </div>
  )
}

export default ProfileEdit
